<template>

	<view class="container">
		<page-nav class="custom-title" title="星瑞数科" :leftShow="false"> </page-nav>	
 
			 
		<view class="" style="padding: 30rpx; background-color:  #FFF;">
			<swiper class="swiper-box" indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#FFF"
				:indicator-dots="true" :autoplay="true" :interval="5000" :duration="800">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<navigator :url="item.wxappUrl" hover-class="none" class="swiper-item">
						<image :src="item.wxappUrl" class="banner"></image>
					</navigator>
				</swiper-item>
			</swiper>
			<view style="padding: 30rpx 0rpx 30rpx 0rpx; background-color:  #FFF;">
				<u--input
					    placeholder="请输入企业名称"
					    prefixIcon="search"
					    prefixIconStyle="font-size: 22px;color: #909399" @focus="goqycx"
					></u--input>
			</view>
			<view class="part1">
				<!-- <u-grid :col="4" :border="true"> -->
					<view bg-color="transparent" v-for="(item, index) in head1Info" :key="index">
						<view style="text-align: center;background-color: #FFF;"><span
								style="font-size: 48rpx; font-weight: bold; color:#2a84fe">{{ item.num }}</span>
							<span style="font-size: 26rpx;;">{{ item.unit }}</span>
						</view>
						<view class="nav-item-name"> <span
								style="font-size: 26rpx;; color: #666666;">{{ item.name }}</span> </view>
					</view>
				<!-- </u-grid> -->
			</view>
		</view>
		
		<view style="height: 30rpx; background-color: #F3F5FC;"></view>
		 
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
					<navigator :url="item.url" hover-class="none" class="nav-item">
						<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						<view class="nav-item-name">{{ item.name }}</view>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="height: 30rpx; background-color: #F3F5FC;"></view>

		<!-- 新闻模块 start -->
		<view class="news">
			<navigator hover-class="none" url="/pages/news/list" class="cell">			 
				<!-- <image src='https://www.xrskfw.com/static/images/home/dtzx.png' mode="widthFix"  style="width: 150rpx; "></image> -->
				<!-- <view class="more">
					更多
					<u-icon name="arrow-right" color="#2E69FF" size="16"></u-icon>
				</view>      -->   
				<view class="tabitem" >
					行业动态
				</view>
			</navigator>

			<view class="news-list">
				<navigator  :url="`/pages/news/detail?id=${item.id}`"   hover-class="none" class="news-item"
					v-for="(item, index) in newsList" :key="index">
					<view class="left">
						<view class="info">
							{{item.title}}
						</view>
						<view class="date">
							<image src="https://www.xrskfw.com/static/images/home/date.png" class="icon" mode=""></image>
							{{item.pubTime}}
						</view>
					</view>				 
					 <image :src="item.coverPhoto!==''?item.coverPhoto:defaultImage"  class="img"/>
				</navigator>
				<!-- <u-loadmore :status="status" /> -->
			</view>
			<!-- 新闻模块 end -->
		 
		</view> 
		
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	var WXBizDataCrypt = require('./WXBizDataCrypt')
	import {
		fakePosition, 
		fakeNavButton,
		fakeNoticeList,
		fakHead1Info,
		fakeServiceButton,
		getBannerList,
		dtzxlist
	} from '@/api/mock/home.js'
	export default {
		data() {
			return {
				position: '',
				positionArr: [],
				status: 'loadmore',
				list: 15,
				page: 0,
				keyword: '',
				focus: false,
				bannerList: [],
				noticeList: [],
				newsList: [],
				head1Info: [{}],
				navButton: [],
				serviceButton: [],
				show: false,
				label: "",
				columns: [
					['中国', '美国', '日本']
				],
				defaultImage: 'https://www.xrskfw.com/static/images/home/def.png' ,// 默认图片地址
				currentZxid:'111',
				value5: 0,
				
			}
		},
		 
		onLoad() { 
			// this.$u.vuex("tabbarIndex",0)
			// 后续将改为与后端联动
			// 加载banner数据
			fakePosition().then(data => {
				this.position = data.position
				this.positionArr = data.positionArr
			})
			// 加载banner数据
			getBannerList({}).then(data=>{ 
			 	this.bannerList = data.data
			 })
			// 加载通知公告数据
			fakeNoticeList().then(data => {
				this.noticeList = data
			})
			// 加载顶部按钮数据
			fakeNavButton().then(data => {
				this.navButton = data
			})
			// 加载服务按钮数据
			fakeServiceButton().then(data => {
				this.serviceButton = data
			})
			fakHead1Info().then(data => {
				this.head1Info = data;
			}) 
			
			dtzxlist({}).then(data => {
				 
				this.newsList = data.data.records;				 
			}).catch(() => {
			
			})
			
			
			const that = this;
			wx.login({  
			        success: (res) => {  
			            if (res.code) {         //微信登录成功 已拿到code  
			                // ...doSomething   
							 wx.request({
							             url: 'https://www.xrskfw.com/api/xrsk-server/home/wxUserAccess',
							             data: {
							               code: res.code
							             },  
							             method: 'POST',
							             dataType: 'json',
							             success: function (cts) {
							                //请求成功的处理											 
											console.log(cts)    
											that.session_key= cts.data.session_key;
											that.openid = cts.data.openid;	
											
											// this.$refs.regbtn.confirm();
									}})
			            } else {  
			                console.log('登录失败！' + res.errMsg)  
			            } 						 						 					
			        }  
			    }) 										
		},
		onReachBottom() {
			// 后续将改为与后端联动
			// if (this.page >= 3) return
			// this.status = 'loading'
			// this.page = ++this.page
			// setTimeout(() => {
			// //	this.list += 10
			// 	if (this.page >= 3) this.status = 'nomore'
			// 	else this.status = 'loading'
			// 	// this.newsList.push(...[{}, {}])
			// 	// dtzxlist({}).then(data => {
			// 	// 	console.log(data)
			// 	// 		this.newsList = data.data.records;		
					 
			// 	// }).catch(() => {
				
			// 	// })
			// }, 2000)
		},
		methods: {
			gopage(){
				console.log("fsadfsadfsad")
				uni.reLaunch({
					url:'/pages/news/list'
				})
			},
			goqycx(){
				uni.navigateTo({
					url:'/pages/company/company_search'
				})
			},
			change5(name) { 
				  this.value5 = name
				  uni.navigateTo({
				  	url:'pages/news/list'
				  })
			},
			changePicker(e) {
				console.log(this.pickerArr[e.detail.value].name)
				this.position = this.pickerArr[e.detail.value].name
			},
			handleFocus() {
				this.focus = !this.focus
			},
			handleSearchBlur() {
				this.focus = false
			},
			changeHandler(e) {
				console.log(e);
			},
			confirm(e) {
				console.log(e);
				this.show = false;
			},
			getPhoneNumber(res){ // 获取手机号
				console.log(this.session_key)	
				console.log(res)	
				
				var appId = 'wxf29116035ac1a2ab'
				var sessionKey = this.session_key;
				var encryptedData = res.detail.encryptedData;			 
				var iv = res.detail.iv;
				var pc = new WXBizDataCrypt(appId, sessionKey)				
				var data = pc.decryptData(encryptedData , iv)
				
				console.log(data)	
			}, 
			handleImageError(event) {
			      // 图片加载失败时，将src属性指定为默认图片地址
			      event.target.src = this.defaultImage;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #FFF;
		min-height: 100vh;
		overflow: hidden;
	}

	
	.parthead {
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}

	.head {
		position: relative;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.head-bg {
		position: absolute;
		left: 0px;
		top: 0px;
		z-index: -1;
		width: 750rpx;
		height: 270rpx;
		background: linear-gradient(90deg, #69b0ff, #5f88ff);
	}
	
	.tabitem{
		position: relative;
		font-size: 36rpx;
		font-weight: bold;
		background: url("/static/images/user/line_dlzc.png") no-repeat center bottom;
		background-size: 100% 20rpx;
	}
	.nav-wrap {
		width: 100%;
		padding: 0 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.picker-box {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #ffffff;

			.arrow {
				margin-left: 10rpx;
			}
		}

		.rider {
			flex-shrink: 0;
			width: 131rpx;
			height: auto;
		}

		.search-input {
			width: 300rpx;
			height: 50rpx;
		}

		.tool {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icon {
				height: auto;
			}

			.search-icon {
				width: 40rpx;
				margin-right: 34rpx;
			}

			.message-icon {
				width: 32rpx;
				margin-right: 27rpx;
			}

			.qr-icon {
				width: 37rpx;
			}
		}
	}

	.swiper-box { 
		width: 100%;
		height: 270rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			.banner {
				width: 100%;
				height: 100%;
				border-radius: 5pt;
			}
		}
	}

	.part1 { 
		margin-top: 10rpx;  
		display: flex;
		width:  auto;		
		padding: 20rpx 20rpx;
		justify-content: space-between; 
	}

	.nav {	 
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		background-color: #FFFFFF;

		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;
			

			&-img {
				width: 100rpx;
				height: 100rpx;
			}

			&-name {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #212121;
			}
		}
	}

	.notice-box {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		margin: 0 20rpx;
		padding: 30rpx 20rpx;

		.img {
			width: 75rpx;
			height: auto;
			margin-right: 36rpx;
			margin-left: 10rpx;
		}

		.notice-info {
			flex: 1;

			.notice-cell:first-of-type {
				margin-bottom: 15rpx;
			}
		}

		.notice-cell {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #585b61;

			.icon {
				width: 63rpx;
				margin-right: 18rpx;
			}

			.text {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.service-box {
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		margin: 30rpx 20rpx 0;
		padding: 0rpx 20rpx;

		.service-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #585b61;

			.img {
				width: 70rpx;
				height: auto;
			}
		}
	}

	.news {
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		// margin: 30rpx 20rpx 60rpx;
		padding: 20rpx 30rpx;

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ctitle {
				// font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #585b61;
			}

			.more {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2E69FF;
			}
		}

		.news-list {
			margin-top: 30rpx;

			.news-item {
				&:not(:last-of-type) {
					padding: 0 0 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #eeeeee;
				}

				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					flex: 1;
					height: 160rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info {
						min-width: 0;
						padding-right: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;						
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #212121;
						line-height: 36rpx;
					}

					.date {
						display: flex;
						align-items: center;

						.icon {
							width: 21rpx;
							height: 21rpx;
							margin-right: 9rpx;
						}

						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #a6abb5;
					}
				}

				.img {
					flex-shrink: 0;
					width: 252rpx;
					height: 160rpx;
					border-radius: 20rpx;
					background-color: #82848a;
				}
			}
		}
	}
</style>